<template>
  <div class="course-management">
    <h1>课程管理</h1>
    <div class="course-actions">
      <button @click="showCreateCourseModal = true">创建新课程</button>
    </div>
    <table class="course-list">
      <thead>
        <tr>
          <th>课程名称</th>
          <th>教师</th>
          <th>学生数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="course in courses" :key="course.id">
          <td>{{ course.name }}</td>
          <td>{{ course.teacher }}</td>
          <td>{{ course.studentCount }}</td>
          <td>
            <button @click="editCourse(course)">编辑</button>
            <button @click="deleteCourse(course.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- 创建课程模态框 -->
    <div v-if="showCreateCourseModal" class="modal">
      <div class="modal-content">
        <h2>创建新课程</h2>
        <form @submit.prevent="createCourse">
          <input v-model="newCourse.name" placeholder="课程名称" required>
          <textarea v-model="newCourse.description" placeholder="课程描述"></textarea>
          <button type="submit">保存</button>
          <button type="button" @click="showCreateCourseModal = false">取消</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useCourseStore } from '../stores/course.store'

const courseStore = useCourseStore()
const courses = ref([])
const showCreateCourseModal = ref(false)
const newCourse = ref({
  name: '',
  description: ''
})

onMounted(async () => {
  courses.value = await courseStore.fetchCourses()
})

const createCourse = async () => {
  await courseStore.createCourse(newCourse.value)
  showCreateCourseModal.value = false
  courses.value = await courseStore.fetchCourses()
}

const editCourse = (course) => {
  // 实现编辑课程逻辑
}

const deleteCourse = async (courseId) => {
  await courseStore.deleteCourse(courseId)
  courses.value = await courseStore.fetchCourses()
}
</script>

<style scoped>
.course-management {
  padding: 20px;
}

.course-list {
  width: 100%;
  border-collapse: collapse;
}

.course-list th, .course-list td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
  width: 400px;
}
</style>
